<script setup>

</script>

<template>
  <div class="layout">
  <div class="nhcar-cart-page">
    <div class="containFer m-top-20">
      <div class="cart">
        <table>
          <thead>
          <tr>
            <th width="120">
              <el-checkbox/>
            </th>
            <th width="400">商品信息</th>
            <th width="220">单价</th>
            <th width="180">数量</th>
            <th width="180">小计</th>
            <th width="140">操作</th>
          </tr>
          </thead>
          <!-- 商品列表 -->
          <tbody>
          <tr>
            <td>
              <el-checkbox />
            </td>
            <td>
              <div class="goods">
                <RouterLink to="/"><img  alt="" /></RouterLink>
                <div>
                  <p class="name ellipsis">

                  </p>
                </div>
              </div>
            </td>
            <td class="tc">
              <p>&yen;</p>
            </td>
            <td class="tc">
              <el-input-number />
            </td>
            <td class="tc">
              <p class="f16 red">&yen;</p>
            </td>
            <td class="tc">
              <p>
                <el-popconfirm title="确认删除吗?" confirm-button-text="确认" cancel-button-text="取消" @confirm="delCart(i)">
                  <template #reference>
                    <a href="javascript:;">删除</a>
                  </template>
                </el-popconfirm>
              </p>
            </td>
          </tr>
          <tr>
            <td colspan="6">
              <div class="cart-none">
                <el-empty description="购物车列表为空">
                  <el-button type="primary">随便逛逛</el-button>
                </el-empty>
              </div>
            </td>
          </tr>
          </tbody>

        </table>
      </div>
      <!-- 操作栏 -->
      <div class="action">
        <div class="batch">
          共 10 件商品，已选择 2 件，商品合计：
          <span class="red">¥ 200.00 </span>
        </div>
        <div class="total">
          <el-button size="large" type="primary" ><router-link style="color: white" to="/suborder">下单结算</router-link></el-button>
        </div>
      </div>
    </div>
  </div>
  </div>
<!--  <div id="wrapper" class="layout">-->
<!--    <div class="curpostion"><a href="#">首页</a><span>&gt;</span><a href="#">购物车</a></div>-->

<!--    <div id="cart">-->
<!--      <form action="order.html">-->
<!--        <table>-->
<!--          <thead>-->
<!--          <tr>-->
<!--            <th scope="col"><input type="checkbox" name="" id="" value="" /></th>-->
<!--            <th scope="col">汽车图片</th>-->
<!--            <th scope="col">名称</th>-->
<!--            <th scope="col">数量</th>-->
<!--            <th scope="col">单价</th>-->
<!--            <th scope="col">小结</th>-->
<!--            <th scope="col">操作</th>-->
<!--          </tr>-->
<!--          </thead>-->
<!--          <tr>-->
<!--            <td><input type="checkbox" name="" id="" value="" /></td>-->
<!--            <td><a href="#"><img src="/src/assets/img/p1.jpg" /></a></td>-->
<!--            <td><a href="#">全新飞度1.5L炫酷运动版AT</a> </td>-->
<!--            <td>-->
<!--              <div class="numopt">-->
<!--                <a href="#">-</a><input type="text" name="" id="" value="1" /><a href="#">+</a>-->
<!--              </div>-->
<!--            </td>-->
<!--            <td>￥87430</td>-->
<!--            <td>￥87430</td>-->
<!--            <td><a href="#">删除</a></td>-->
<!--          </tr>-->
<!--          <tr>-->
<!--            <td><input type="checkbox" name="" id="" value="" /></td>-->
<!--            <td><a href="#"><img src="/src/assets/img/p2.jpg" /></a></td>-->
<!--            <td><a href="#">全新飞度1.5L炫酷运动版AT </a></td>-->
<!--            <td>-->
<!--              <div class="numopt">-->
<!--                <a href="#">-</a><input type="text" name="" id="" value="1" /><a href="#">+</a>-->
<!--              </div>-->
<!--            </td>-->
<!--            <td>￥87430</td>-->
<!--            <td>￥87430</td>-->
<!--            <td><a href="#">删除</a></td>-->
<!--          </tr>-->
<!--          <tfoot>-->
<!--          <tr>-->
<!--            <td><a href="#">删除</a></td>-->
<!--            <td colspan="6" class="cartopt">总金额：￥87430<input name="" type="submit" value="清空" class="clearbt" /><input name="" type="submit" value="去购物台"-->
<!--                                                                                                                            class="enterorder" /></td>-->
<!--          </tr>-->
<!--          </tfoot>-->
<!--        </table>-->
<!--      </form>-->
<!--    </div>-->
<!--  </div>-->

<!--  <div class="product-lay">-->
<!--    <div class="layout">-->
<!--      <div class="product-list">-->
<!--        <h2>猜您喜欢</h2>-->
<!--        <ul>-->
<!--          <li>-->
<!--            <a href="product.html"><img src="/src/assets/img/p1.jpg" /></a>-->
<!--            <h3><a href="product.html">奥迪 奥迪A3 2014款 40TFS</a></h3>-->
<!--            <h4>品牌：<a href="#">奥迪</a></h4>-->
<!--            <p>￥260,000</p>-->
<!--          </li>-->
<!--          <li>-->
<!--            <a href="product.html"><img src="/src/assets/img/p2.jpg" /></a>-->
<!--            <h3><a href="product.html">奥迪 奥迪A3 2014款 40TFS</a></h3>-->
<!--            <h4>品牌：<a href="#">奥迪</a></h4>-->
<!--            <p>￥260,000</p>-->
<!--          </li>-->
<!--          <li>-->
<!--            <a href="product.html"><img src="/src/assets/img/p5.jpg" /></a>-->
<!--            <h3><a href="product.html">奥迪 奥迪A3 2014款 40TFS</a></h3>-->
<!--            <h4>品牌：<a href="#">奥迪</a></h4>-->
<!--            <p>￥260,000</p>-->
<!--          </li>-->
<!--          <li>-->
<!--            <a href="product.html"><img src="/src/assets/img/p6.jpg" /></a>-->
<!--            <h3><a href="product.html">奥迪 奥迪A3 2014款 40TFS</a></h3>-->
<!--            <h4>品牌：<a href="#">奥迪</a></h4>-->
<!--            <p>￥260,000</p>-->
<!--          </li>-->

<!--        </ul>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
</template>

<style lang="scss" scoped>

.layout {
  width: 1200px;
  margin: 0 auto;
}
.nhcar-cart-page {
  margin-top: 20px;


  .cart {
    background: #fff;
    color: #666;
    border-radius: 10px; /* 边角圆润 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */

    table {
      border-spacing: 0;
      border-collapse: collapse;
      line-height: 24px;


      th,
      td {
        padding: 10px;
        border-bottom: 1px solid #f5f5f5;

        &:first-child {
          text-align: left;
          padding-left: 30px;
          color: #999;
        }
      }

      th {
        font-size: 16px;
        font-weight: normal;
        line-height: 50px;
      }
    }
  }

  .cart-none {
    text-align: center;
    padding: 120px 0;
    background: #fff;


    p {
      color: #999;
      padding: 20px 0;
    }
  }

  .tc {
    text-align: center;

    a {
      color: $nhCarColor;
    }

    .nhcar-numbox {
      margin: 0 auto;
      width: 120px;
    }
  }

  .red {
    color: $priceColor;
  }

  .green {
    color: $nhCarColor;
  }

  .f16 {
    font-size: 16px;
  }

  .goods {
    display: flex;
    align-items: center;

    img {
      width: 100px;
      height: 100px;
    }

    >div {
      width: 280px;
      font-size: 16px;
      padding-left: 10px;

      .attr {
        font-size: 14px;
        color: #999;
      }
    }
  }

  .action {
    display: flex;
    background: #fff;
    margin-top: 20px;
    height: 80px;
    align-items: center;
    font-size: 16px;
    justify-content: space-between;
    padding: 0 30px;
    border-radius: 10px; /* 边角圆润 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */

    .nhcar-checkbox {
      color: #999;
    }

    .batch {
      a {
        margin-left: 20px;
      }
    }

    .red {
      font-size: 18px;
      margin-right: 20px;
      font-weight: bold;
    }
  }

  .tit {
    color: #666;
    font-size: 16px;
    font-weight: normal;
    line-height: 50px;
  }

}
</style>
